<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <div>
        <Modal v-model='modal' :title="edit?'用户编辑':'用户绑定'" :mask-closable='false' @on-cancel='canceledit(modalname)'>
            <Form :label-width='145' :ref='modalname' :model='modalparams' :rules='createRules'>
                <FormItem v-show="modalparams.id != 0" label='姓名：'>
                    <p>{{modalparams.name}}</p>
                </FormItem>
                <FormItem v-show="modalparams.id == 0" label='姓名：' prop='name'>
                    <Input style="width: 280px" clearable v-model='modalparams.name' placeholder='请填写员工真实姓名' />
                </FormItem>
                <FormItem label='手机号：' prop='mobile'>
                    <Input style="width: 280px" clearable v-model='modalparams.mobile' placeholder='请填写员工真实手机号码' />
                </FormItem>
                <FormItem label='密码：'>
                    <Input style="width: 280px" clearable v-model='modalparams.password' :placeholder="modalparams.id == 0?'默认为空，初始密码为jgwl123456':'默认为空，代表不修改密码'" />
                </FormItem>
                <FormItem label='所属项目：' prop='project_ids'>
                    <Select v-model="modalparams.project_ids" multiple :max-tag-count='3' style="width:280px" placeholder='请选择项目'>
                        <Option v-for="item in projectList" :value="item.value" :key="item.value">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label='是否为项目管理员：'>
                    <RadioGroup v-model="modalparams.is_manager">
                        <Radio v-for="item of raidolist" :key="item.value" :label="item.value">{{item.label}}</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot='footer'>
                <Button @click='canceledit(modalname)'>取消</Button>
                <Button @click='submitedit(modalname)' type='primary'>保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import { rbacmemberaddpersonnel, rbacmemberupdatepersonnel } from '@api/peoplesetting'
    import { getRoleList } from '@/api/powersetting.js';
    export default {
        name: '',
        components: {},

        data () {
            return {
                modalname: 'modalname',
                modal: false,
                projectList: util.storage.get('project'),
                raidolist: [{ value: 1, label: '是' }, { value: 0, label: '否' }],
                edit: false,
                project: '',
                rolelist: [],
                modalparams: { id: 0, name: '', password: '', project_ids: [], mobile: '', is_manager: 1 },
                createRules: {
                    project_ids: [{
                        required: true,
                        message: '请选择项目',
                        type: 'array',
                        trigger: 'change'
                    }],
                    name: [{
                        required: true,
                        message: '请填写员工真实姓名',
                        trigger: 'blur'
                    }],
                    mobile: [
                        { required: true, type: 'string', message: '请填写员工真实手机号码', trigger: 'blur' },
                        { message: '请输入11位手机号', pattern: /^1[3456789]\d{9}$/, trigger: 'blur' }
                    ]
                }
            };
        },
        mounted () {
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                this.modalparams = { id: 0, name: '', password: '', project_ids: [], mobile: '', is_manager: 1 }
                this.$refs[this.modalname].resetFields()
                this.askData(row)
            },
            askData (row) {
                this.modal = true
                this.edit = true
                if (row) {
                    this.modalparams.id = row.id
                    this.modalparams.name = row.realname
                    this.modalparams.project_ids = row.project_id_arr
                    this.modalparams.mobile = row.mobile
                    this.modalparams.is_manager = +row.is_manager
                } else {
                    this.edit = false
                }
            },
            canceledit (name) {
                this.modalparams = { id: 0, name: '', password: '', project_ids: [], mobile: '', is_manager: 1 }
                this.$refs[this.modalname].resetFields()
                this.modal = false
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = {
                            id: this.modalparams.id,
                            project_ids: this.modalparams.project_ids.join(','),
                            mobile: this.modalparams.mobile,
                            password: this.modalparams.password,
                            is_manager: this.modalparams.is_manager
                        }
                        if (params.id == 0) {
                            params.name = this.modalparams.name
                            rbacmemberaddpersonnel(params).then(() => {
                                this.$Message.success('新增成功')
                                this.modal = false
                                this.$emit('askData')
                            })
                        } else {
                            rbacmemberupdatepersonnel(params).then(() => {
                                this.$Message.success('编辑成功')
                                this.modal = false
                                this.$emit('askData')
                            })
                        }
                    }
                })
            }
        }
    }
</script>
